<template>
	<view class="container">
		<view class="up">
			<view class="image-div">
				<image :src="'/static/'+sx[shuxiang]+'.png'" mode="aspectFit" class="images" v-if="shuxiang.length>0"></image>
				<!-- <view class="up" v-if="shuxiang!=''">
					{{shuxiang}}
				</view> -->
				<view class="up">
					<text v-if="shuxiang!='生肖'">属</text> {{shuxiang}}
				</view>
			</view>
			<view class="image-div">
				<image :src="'/static/' +xz[xingzuo]+'.png'" mode="aspectFit" class="images" v-if="xingzuo.length>0"></image>
				<view class="up">
					{{xingzuo}}
				</view>
			</view>
		</view>

		<view class="down">
			<view class="age-title" v-if="age>0">
				今天，你
				<text class="age">{{year}}</text>
				周岁，虚岁
				<text class="age">{{age}}</text>
				<text v-if="age<11">岁</text>
				了
			</view>
			<view class="age-title" v-else-if="age==''">
				{{getSentence}}
			</view>
			<view class="title">
				在这个世界上，你已经存在了
			</view>
			<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> -->
			<uni-grid :column="3" @change="showCalendar">
				<uni-grid-item>
					<view class="center">
						<text class="small">{{year}}</text>
						<text class="big">年</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="center">
						<text class="small">{{month}}</text>
						<text class="big">月</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="center">
						<text class="small">{{week}}</text>
						<text class="big">周</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="center">
						<text class="small">{{day}}</text>
						<text class="big">天</text>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view class="center">
						<text class="small">{{hour}}</text>
						<text class="big">小时</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="center">
						<text class="small">{{minute}}</text>
						<text class="big">分钟</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<!-- </picker> -->
			<quick-calendar :date="date" :show="showDateDialog" @closeDialog="closeDateDialog" @confirmDialog="bindDateChange">
			</quick-calendar>

		</view>
		<view class="footer">

			<button type="warn" style="margin: 20rpx; background-color: #60C290;" open-type="share">分享给朋友</button>
			<text class="title">@疯二毛</text>
		</view>
	</view>
</template>

<script>
	import calendar from '../../components/quick-calendar/calendar-data/calendar.js'
	// var lunar=require('../../common/lunar.js')
	export default {
		onLaunch: function() {
			// uni.showLoading({
			// })
			console.log('page/index Launch');
			uni.showShareMenu({
				withShareTicket: true
			})
		},
		onShow: function() {
			console.log('page/index Show');
		},
		// onReady: function() {
		// 	uni.hideLoading()
		// 	console.log('page/index ready');
		// },
		onHide: function() {
			console.log('page/index Hide');
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '从出生到现在，你活了多少天？',
				path: '/pages/index/index'
				// ,desc: '快来看一看！'
			}
		},

		data() {
			const currentDate = this.getDate({
				format: true
			})
			// console.log(currentDate)
			return {
				mingrenmingyan: ['人生相逢，自是有时。', '一别两宽，各生欢喜。', '使人成熟的是经历，而不是岁月。', '寓形宇内复几时，曷不委心任去留？', '受苦的人生，没有悲观的权力。', '人不可以无耻。',
					'愿你宠辱不惊，去留无意。', '每一粒尘埃，都是一颗星球。', '四海无闲田，农夫犹饿死。', '两情若是久长时，不如自挂东南枝。'
				],
				showDateDialog: false,
				shuxiang: '生肖',
				xingzuo: '星座',
				title: 'picker',
				age: '',
				date: currentDate,
				year: '请',
				month: '选',
				week: '择',
				day: '破',
				hour: '壳',
				minute: '日',
				sx: {
					'生肖': 'shengxiao',
					'鼠': 'shu',
					'牛': 'niu',
					'虎': 'hu',
					'兔': 'tu',
					'龙': 'long',
					'蛇': 'she',
					'马': 'ma',
					'羊': 'yang',
					'猴': 'hou',
					'鸡': 'ji',
					'狗': 'gou',
					'猪': 'zhu'
				},
				xz: {
					'星座': 'xingzuo',
					'白羊座': 'baiyang',
					'金牛座': 'jinniu',
					'射手座': 'sheshou',
					'水瓶座': 'shuiping',
					'天秤座': 'tianping',
					'巨蟹座': 'juxie',
					'处女座': 'chunv',
					'魔羯座': 'mojie',
					'狮子座': 'shizi',
					'双鱼座': 'shuangyu',
					'双子座': 'shuangzi',
					'天蝎座': 'tianxie'
				}
			}
		},
		computed: { //动态绑定数据（计算）
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			getSentence() {
				return this.mingrenmingyan[Math.floor(Math.random() * this.mingrenmingyan.length)]
			}
		},
		methods: {
			findKey: function(data, value, compare = (a, b) => a === b) {
				return Object.keys(data).find(k => compare(data[k], value))
			},
			showCalendar: function() {
				this.showDateDialog = true
			},
			closeDateDialog: function() {
				this.showDateDialog = false //先关闭日期选择对话框
			},
			bindDateChange: function(e) {

				// console.log(e)
				this.date = e.date //和下面取回的值相同
				// this.date = e.target.value

				// 每次点击都重新设置日期
				let birthday = new Date(this.date + ' ')
				//new Date('2020-02-02 ')是从0点起算，后面不加空的话，会从8点起算
				let nowDate = new Date()

				//周、日、时、分 通过秒数计算
				let second = parseInt((nowDate - birthday) / 1000)
				this.minute = parseInt(second / 60)
				this.hour = parseInt(this.minute / 60)
				this.day = parseInt(this.hour / 24)
				this.week = parseInt(this.day / 7)
				//年、月 要重新写算法
				let birth_year = birthday.getFullYear();
				let birth_month = birthday.getMonth() + 1;
				let birth_day = birthday.getDate();

				let now_year = nowDate.getFullYear();
				let now_month = nowDate.getMonth() + 1;
				let now_day = nowDate.getDate();

				let year_ = now_year - birth_year
				let month_ = now_month - birth_month
				let day_ = now_day - birth_day
				let month_pre = 0
				if (month_ >= 0) { //当前月份大于生日月份，直接相减
					this.year = year_
					month_pre = this.year * 12 + month_
				} else { //当前月份小于生日月份，年数-1，月份+12再+得到的负数
					this.year = year_ - 1
					month_pre = this.year * 12 + month_ + 12
				}
				this.month = day_ >= 0 ? month_pre : month_pre - 1
				this.age = year_ + 1;

				// this.getDateInfo(this.date)
				//calendar库 公历转农历
				let date = calendar.solar2lunar(birth_year, birth_month, birth_day)
				console.log(date)
				//星座
				this.xingzuo = date.astro
				//生肖
				this.shuxiang = date.Animal
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 200;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}

	.up {
		flex: 1;
		display: flex;
		justify-content: center; //水平居中
		align-items: center; //垂直居中

	}

	.images {
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
		margin: 0 30rpx;
		will-change: transform;
	}

	.image-div {
		display: flex;
		flex-direction: column;
		margin: 20rpx;
		justify-content: center;
		/* background-color: #beeaec; */
		/* border-radius: 40%; */
	}

	.down {
		/* position: fixed; */
		width: 670rpx;
		/* min-height: 100%; */
		/* bottom: auto; */
		/* left: 25rpx; */
		/* background-color: #fafafa; */
		/* z-index: 1; */
	}

	.container {
		/* background-color: #fafafa; */
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.center {
		display: flex;
		flex-direction: column; //竖向排列
		justify-content: center; //水平居中
		align-items: center; //垂直居中
		width: 100%;
		height: 100%;
	}

	.footer {
		display: flex;
		flex-direction: column-reverse;
		justify-content: center; //水平居中
		align-items: center; //垂直居中
	}

	.big {
		transform: scale(2.5); //缩放
	}

	.small {
		margin-bottom: 35rpx; //下边距
		transform: scale(1.5); //缩放
		color: #5cba8a;
	}

	.age {
		color: #60c290;
		font-size: larger;
		padding: 0 10rpx;
	}

	.age-title {
		font-size: medium;
		font-weight: bold;
		text-align: center;
		margin: 50rpx auto;
	}



	.title {
		color: #999999;
		font-size: small;
		margin: 0 auto;
	}
</style>
